<template>
  <div class="about">
    <div class="headerBox">
      <div class="leftBox">望江童装网管理后台</div>
      <div class="rightBox">
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
        ></el-avatar>
        <img
          src="@/assets/image/home/tuichu.png"
          @click="logout"
          class="tcImg"
          alt=""
        />
      </div>
    </div>
    <el-container style="display: flex">
      <el-menu
        :default-active="checked"
        class="el-menu-vertical-demo"
        router
        @open="handleOpen"
        unique-opened
        @select="handleSelect"
        :default-openeds="defaultOpenedsArray"
        @close="handleClose"
        text-color="#000"
        active-text-color="#00519D"
        :collapse="show"
      >
        <div v-for="item in menuList" :key="item.path + ''">
          <!-- 没有子菜单 -->
          <template v-if="item.children && item.children.length == 0">
            <el-menu-item
              :index="item.path + ''"
              :disabled="item.path == '' ? true : false"
            >
              <img
                style="margin: 0 10px 0 5px; width: 16px; height: 16px"
                :src="
                  item.path == nav_active ? item.AFTER_CLICK : item.BEFORE_CLICK
                "
                alt=""
              />
              <span slot="title"> {{ item.title }}</span>
            </el-menu-item>
          </template>

          <!-- 有子菜单 -->
          <el-submenu v-else :index="item.path + ''">
            <template slot="title">
              <img
                style="margin: 0 10px 0 5px; width: 16px; height: 16px"
                :src="chooseIcon(item, $route.path)"
                alt=""
              />
              <span slot="title"> {{ item.title }}</span>
            </template>

            <template v-for="child in item.children">
              <!-- 这里是类似递归循环 -->
              <sidebar-item
                v-if="child.children && child.children.length > 0"
                :item="child"
                :key="child.path + ''"
              />
              <el-menu-item
                v-else
                :key="child.path + ''"
                :index="child.path"
                style="padding-left: 50px"
              >
                <span slot="title"> {{ child.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </div>
      </el-menu>

      <div class="triangle" @click="show = !show">
        <div class="jiao">
          <i :class="show ? 'el-icon-caret-right' : 'el-icon-caret-left'"></i>
        </div>
      </div>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>
<script>
import { getToken, setToken, removeToken } from '@/utils/auth'
export default {
  data () {
    return {
      show: false,
      userName: "",
      checked: "/ClearanceGoods",
      breadtitle: "商品管理",
      nav_active: "/ClearanceGoods",
      defaultOpenedsArray: [],
      menuList: [
        {
          title: "商品管理",
          path: "/ClearanceGoods",
          BEFORE_CLICK: require("../assets/image/home/home.png"),
          AFTER_CLICK: require("../assets/image/home/home1.png"),
          children: [
            {
              title: '清仓商品',
              path: '/ClearanceGoods'
            },
            {
              title: '直播选品',
              path: '/LiveSelection'
            }
          ]
        },
        {
          title: '广告管理',
          path: '#',
          BEFORE_CLICK: require('../assets/image/home/home.png'),
          AFTER_CLICK: require('../assets/image/home/home1.png'),
          children: [
            {
              title: '广告管理',
              path: '/AdvertisingManagement'
            },
            {
              title: '广告系统配置',
              path: '/AdvertisingConfiguration'
            }
          ]
        },
        {
          title: '系统配置',
          path: '##',
          BEFORE_CLICK: require('../assets/image/home/home.png'),
          AFTER_CLICK: require('../assets/image/home/home1.png'),
          children: [
            {
              title: '帮助中心',
              path: '/HelpCenter'
            },
            {
              title: '关于我们',
              path: '/AboutUs'
            },
            {
              title: '数据管理',
              path: '/DataManagement'
            }
          ]
        },
        // 订单管理
        {
          title: '订单管理',
          path: '',
          BEFORE_CLICK: require('../assets/image/home/home.png'),
          AFTER_CLICK: require('../assets/image/home/home1.png'),
          children: [
            {
              title: '订单列表',
              path: '/orderManage'
            },
            {
              title: '售后订单',
              path: '/afterSalesManage'
            }
          ]
        },
        {
          title: '会员管理',
          path: '/#########',
          BEFORE_CLICK: require('../assets/image/home/home.png'),
          AFTER_CLICK: require('../assets/image/home/home1.png'),
          children: [
            {
              title: '供应商审核',
              path: '/MembershipManagement'
            },
            {
              title: '会员管理',
              path: '/MembershipManagementS'
            }
          ]
        },
        {
          title: '类目管理',
          path: '/categoryManage',
          BEFORE_CLICK: require('../assets/image/home/home.png'),
          AFTER_CLICK: require('../assets/image/home/home1.png'),
          children: []
        }
      ],
      item: {}
    }
  },
  created () {
    this.userName = localStorage.getItem('userName')
    this.checked = this.$route.path
    const id = getToken()
  },
  methods: {
    // 退出登录
    logout () {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    dj () {},
    chooseIcon (item, route) {
      console.log(item, route)
      this.item = item
      let n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
      for (let i = 0; i < item.children.length; i++) {
        if (item.children[i].path == this.nav_active) {
          n = 1
        }
      }
      if (n == 1) {
        // 被点击了，返回高亮图标
        return item.AFTER_CLICK
      } else {
        // 未被点击，返回未高亮图标
        return item.BEFORE_CLICK
      }
    },
    handleSelect (key, keyPath) {
      console.log(key)
      this.menuList.forEach((el) => {
        if (el.path == key) {
          if (el.children.length == 0) {
            this.defaultOpenedsArray = []
          }
        }
      })
      this.nav_active = key
      this.checked = key
      console.log(key, keyPath)
      if (key == '/gzt') {
        this.breadtitle = '项目建设计划'
      }
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style>
.el-main {
  padding: 0;
  width: 80%;
}
.el-submenu.is-active .el-submenu__title {
  color: #018ffb !important;
}

.el-menu-item.is-active {
  background: rgba(39, 63, 156, 0.06) !important;
  color: #000;
  border-left: 3px solid #00519d;
}
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.el-menu {
  height: 100%;
}
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}
.el-container {
  width: 100%;
  height: calc(100% - 82px);
}
</style>

<style scoped lang="scss">
.about {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  .triangle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    .jiao {
      background: #018ffb;
      display: flex;
      align-items: center;
      height: 60px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: 12px;
      color: #fff;
    }
  }

  /deep/ .demo-block.demo-menu .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
  }
  .headerBox {
    background: #004cac;
    padding: 20px;
    display: flex;
    justify-content: space-between;

    .leftBox {
      display: flex;
      color: #fff;
      font-size: 24px;
      font-weight: 700;
      line-height: 42px;

      .imgBox {
        width: 50px;
        height: 42px;
        margin-right: 30px;
      }
    }

    .rightBox {
      display: flex;
      align-items: center;
      cursor: pointer;

      .messImg {
        width: 20px;
        height: 22px;
      }

      .tcImg {
        width: 22px;
        height: 22px;
        margin-left: 60px;
      }
    }
  }
}
</style>
